<template>
  <div id="container">
    <div class="content">
      <div class="content-left" data-tauri-drag-region>
        <img data-tauri-drag-region v-show="ispt === 1" @click="minimize" ref="i" src="" alt="">
        <img data-tauri-drag-region v-show="ispt === 0" class="chatu" src="../assets/bgc/chatu4.png" alt="">
      </div>
      <div class="content-right" data-tauri-drag-region>
        <input @focus="close_user_tip" ref="username" placeholder="请输入账号" @blur="get_portrait" type="text" />
        <input ref="password" placeholder="请输入旧密码" type="password" />
        <input ref="rpassword" placeholder="请输入新密码" type="password" />
        <!-- <input ref="verify" placeholder="验证码" type="text" /> -->
        <!-- <div class="vc">
          <div class="vc-img">
            <img ref="vcimg" :src="`${this.ipAddr}/vc.jpg`" alt="" />
          </div>
          <div class="rf" @click="rfvc">看不清？换一张。</div>
        </div> -->
        <div class="log-reg">
          <div style="margin-right: 40px; border-radius: 20px;" class="login" @click="login()">确认修改</div>
          <!-- <div class="register" @click="register">登录</div> -->
        </div>
      </div>

    </div>
    <div v-show="isShowRecentUsers === 1" class="recent-login-users">
    </div>
  </div>
</template>
<script>
import {
  isPermissionGranted,
  requestPermission,
  sendNotification,
} from '@tauri-apps/plugin-notification';
import axios from 'axios'
import settings from "../settings.json"
export default {
  data() {
    return {
      ipAddr: '',
      ispt: 0,
      storage: null,
      recentUsers: [],
      isShowRecentUsers: 0
    }
  },
  async created() {
    sendNotification({ title: 'Tauri', body: '程序启动了!' });
    // this.$store.commit('updateIpaddr', '88888888888')
    this.ipAddr = settings.ipAddress
  },
  methods: {
    async minimize() {
      try {
        await invoke('minimize_window');
      } catch (error) {
        console.error('Failed to minimize window:', error);
      }
    },
    rfvc() {
      const time = new Date
      const vc = this.$refs.vcimg
      vc.src = `${this.ipAddr}/vc.jpg?t=` + time
    },
    register() {
      // alert("注册")
      this.$router.push('/login');
    },
    login() {
      let username = this.$refs.username.value;
      let password = this.$refs.password.value;
      let rpassword = this.$refs.rpassword.value;

      axios.get(`${this.ipAddr}/user/updatePassword`, {
        params: {
          username: this.$refs.username.value,
          password: this.$refs.password.value,
          rpassword: this.$refs.rpassword.value,
        }
      }).then(async res => {
        if (res.data.msg == 'ok') {
          alert("修改成功")

        } else {
          alert("修改失败")
        }
      }).catch(err => {
        alert("修改失败")
      })
    },
    loginVerfy() {
      axios.get(`${this.ipAddr}/loginVerify`, {
        params: {
          code: this.$refs.verify.value
        }
      }).then(res => {
        console.log(res.data);
        this.login()
      }).catch(err => {

      })
    },
    close_user_tip() {
      this.isShowRecentUsers = 0
    },

    selectUser(index) {
      this.$refs.username.value = this.recentUsers[index].username
      this.$refs.password.value = this.recentUsers[index].password
      this.get_portrait()
    },


    async getAllFriends(username) {
      await axios.get(this.ipAddr + '/friend/getAllFriends', {
        params: {
          username: username
        }
      }).then(res => {
        console.log(res.data);
        this.friendList = res.data
        this.storage.setItem("allFriends", res.data)
        // this.$store.commit("setFriends", res.data)
      })
    },

    async get_portrait() {
      let username = this.$refs.username.value
      if (username.endsWith(".com")) {
        await axios.get(`${this.ipAddr}/user/user/` + username, {})
          .then(res => {
            if (res.data.msg === "ok") {
              this.ispt = 1
              this.$refs.i.src = this.ipAddr + "/file/getPortrait/" + username
            } else {
              this.ispt = 0
            }
          }).catch(err => {
            console.log(err)
            this.ispt = 0
          })
      }

    },
  },


  mounted() {
    let cn = localStorage.getItem("currentUsername")
    if (cn != null && cn != undefined && cn != '') {
      this.$refs.username.value = localStorage.getItem("currentUsername")
      this.$refs.password.value = localStorage.getItem("currentPassword")
    }
  }
}
</script>
<style lang="scss">
#container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: rgb(221, 255, 255);
  // background-repeat: no-repeat;
  // background-attachment: fixed;
  // flex-direction: column;
  // background-position: center;
  // background-size: cover;
  // background-image: url("../assets/bgc/d6feb792512e4cd09be1a90113a91c0e.jpg");
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    background-color: #fff;
    width: 400px;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;

    .content-left {
      width: 140px;
      height: 260px;
      background-color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;

      //opacity: 0.9;
      img {
        width: 136px;
        height: 136px;
        border-radius: 50%;
        overflow: hidden;
      }

      .chatu {
        width: 140px;
        height: auto;
        border-radius: 4px;
        overflow: hidden;
      }
    }

    .content-right {
      width: 260px;
      height: 260px;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;

      input {
        background-color: #ead7d7;
        color: #0f0f0f;
        outline: none;
        border: 0px;
        border-radius: 4px;
        width: 70vw;
        height: 30px;
      }

      input:hover {
        background-color: #bab9b9;
      }

      //opacity: 0.5;
      .vc {
        width: 230px;
        height: 40px;
        //background-color: #3e1f1f;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 14px;
        color: #0dff00;

        .vc-img {
          height: 36px;
          width: 100px;
          outline: none;
          border-radius: 4px;
          overflow: hidden;
          display: flex;
          justify-content: space-around;
          align-items: center;

          img {
            height: 38px;
            width: 102px;
          }
        }

        .rf:hover {
          color: #42d0fc;
        }

      }

      .log-reg {
        // background-color: #9d0d0d;
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        align-items: center;

        .login {
          height: 30px;
          width: 120px;
          // border-radius: 20px;

          line-height: 30px;
          text-align: center;
          margin-left: 40px;

          background-color: #31ff3b;
          color: #fbff00;
        }

        .login:hover {
          background-color: #fcff3d;
          color: #00ff40;
        }

        .register {
          height: 30px;
          line-height: 30px;
          margin-left: 20px;
          color: rgb(230, 36, 36);
        }

        .register:hover {
          color: #08591d;
        }
      }
    }
  }

  .recent-login-users {
    position: fixed;
    background-color: whitesmoke;
    height: 90px;
    width: 220px;
    border-radius: 4px;
    top: 75px;
    right: 20px;
    color: #0f0f0f;

    div {
      width: 220px;
      height: 30px;
      line-height: 30px;
      // background-color: #fff;
    }

    div:hover {
      background-color: #9cc68a;
      border-radius: 4px;
    }
  }
}
</style>
